<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
    // 回调函数会造成回调地狱
    // 看起来不再是从上往下的代码
    // 代码之间高度耦合，代码乱，出错也不容易排查，维护性比较差





    // 定时器就是一种异步编程
    // 异步的代码是会去异步队列（挂起的状态，不会阻塞其他的同步代码）
    // setTimeout(() => {
    //   console.log("111");
    // }, 10)
    // console.log("222");
    // let sum = 0;
    // for(let i = 0; i < 10000000; i++) {
    //   sum += i;
    // }
    // console.log(sum);
    // console.log("333");



    

    // 下面的代码是一段用来获取接口数据的代码
    // 数据的请求也是一段异步代码
    // 因为网络请求是需要时间的
    // 如果有多个异步，一起开始，谁快谁就先结束
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://cnodejs.org/api/v1/topics');
    xhr.send();
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText)); // 数据一
        const xhr2 = new XMLHttpRequest();
        xhr2.open('GET', 'https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8');
        xhr2.send();
        xhr2.onload = function() {
          if (xhr2.status === 200) {
            console.log(JSON.parse(xhr2.responseText)); // 数据二
          } else {
            console.error('请求失败', xhr2.status);
          }
        };
      } else {
        console.error('请求失败', xhr.status);
      }
    };

      

    console.log(123);
    
    
    
    
    
  </script>
</body>
</html>